<template>
    <view :class="{'uni-mask':true,'modal-center':true}">
        <view class="active-tip">
            <text class="text1">{{text1}}</text>
            <text v-if="text2" class="text2">{{text2}}</text>
            <text class="text3">{{text}}</text>
            <view class="active-btn" @click="onConfirm">{{confirmText}}</view>

            <mIcon size="80" type="close" color="#fff" @click="onClose"/>
        </view>
    </view>
</template>


<script>
    import mIcon from './m-icon/m-icon.vue';

    export default {
        name: 'ActiveTip',
        components: {
            mIcon
        },
        props: {
            //活动提示内容
            text: {
                type: String,
                default: ''
            },
            confirmText: {
                type: String,
                default: ''
            },
            //活动提示图片
            img: String,
            //获取红包结果 第一个值为金额 第二个值为个数
            activeResult: {
                type: Array,
                default: []
            }
        },
        computed: {
            text1() {
                console.log(this.activeResult)
                if (!this.activeResult[1]) {
                    return `活动时间内不限个数`
                } else {
                    return `恭喜您本次获得${this.activeResult[1]}个红包`
                }
            },
            text2() {
                if (!this.activeResult[0]) {
                    return ''
                } else {
                    return `价值${this.activeResult[0]}元`
                }
            }
        },
        methods: {
            onConfirm() {
                this.$emit('confirm')
            },
            onClose() {
                this.$emit('close')
            }
        }
    }
</script>

<style lang="scss">
    @keyframes myMove {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.1)

        }
    }

    .modal-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .m-icon {
        position: absolute;
        bottom: -60px;
    }

    .uni-mask {
        z-index: 1002;
    }

    .active-tip {
        position: relative;
        border-radius: 16px;
        background: url("../static/img/active-money-rain/open2.png") no-repeat;
        background-size: 100%;
        width: 730px;
        height: 770px;
        display: flex;
        justify-content: center;
        margin: auto;

        .text1 {
            position: absolute;
            text-align: center;
            color: #ea3427;
            bottom: 440px;
            display: block;
            font-size: 30px;
            line-height: 36px;
            width: 50%;
        }

        .text2 {
            position: absolute;
            text-align: center;
            color: #ea3427;
            bottom: 380px;
            display: block;
            font-size: 42px;
            width: 50%;
        }

        .text3 {
            position: absolute;
            text-align: center;
            color: #ffc3a0;
            bottom: 260px;
            display: block;
            font-size: 30px;
            line-height: 36px;
            width: 50%;
        }

        .active-btn {
            position: absolute;
            margin: 0 auto;
            animation: myMove 1s infinite;
            background: url("../static/img/active-money-rain/active-btn.png") center no-repeat;
            background-size: cover;
            color: red;
            font-size: 40px;
            text-align: center;
            line-height: 80px;
            height: 100px;
            bottom:120px;
            width: 50%;
        }
    }
</style>

